/**
 * Created by Administrator on 2017/11/23.
 */
import React, {Component}from 'react';
import {connect} from 'dva';
import {routerRedux, Link} from 'dva/router';
import {
    Row,
    Table,
    Col,
    Card,
    Form,
    Tabs,
    Input,
    Badge,
    Select,
    Icon,
    Button,
    Dropdown,
    Menu,
    InputNumber,
    DatePicker,
    Modal,
    message
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './Distributor.less';
import SupplierTable from '../../components/Supplier';
import ExamineIndex from '../../components/Supplier/ExamineIndex';

const FormItem = Form.Item;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
const { TabPane } = Tabs;
@connect(state => ({
    distributor: state.distributor
}))
@Form.create()
export default class Supplier extends Component {
    state = {
        supplier: [],
        modalVisible: false,
        addInputValue: '',
        selectValue: 0,
        selectedRowKeys: '',
        userId: '',
        keys:'unExamine',
        supplierRecord:{},
        unExamine:0,
        ExaminePass:0,
        ExamineUnPass:0,
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'distributor/querySupplier',
            payload: {
                status: 0,
                taskType: 1,
            }
        });
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.distributor.amount.length!==0){
            this.setState({
                unExamine:nextProps.distributor.amount[0].mount,
                ExaminePass:nextProps.distributor.amount[1].mount,
                ExamineUnPass:nextProps.distributor.amount[2].mount,
            })
        }

    }

    handlesOk = () => {
        let obj = JSON.parse(localStorage.getItem("userInfoState")).userInfo;
        const {addInputValue, selectValue, selectedRowKeys, userId} = this.state;

        this.props.dispatch({
            type: 'distributor/updateDistributor',
            payload: {
                taskId: selectedRowKeys,
                status: selectValue,
                adminId: obj.user_id,
                checkRemark: addInputValue,
                userId: userId,
                examine: 'supplier',
            },
            callback:(response)=>{

                if(response.result===0){
                    message.success("提交成功")
                    this.props.dispatch({
                        type: 'distributor/querySupplier',
                        payload: {
                            status: 0,
                            taskType: 1,
                        }
                    })
                }else{
                    console.log(response.result);
                    message.error("提交失败")
                }
            }
        })
        this.setState({
            modalVisible: false,
            addInputValue: '',
            selectValue: 0,
            selectedRowKeys: '',
            userId: '',
        })

        // this.props.dispatch({
        //     type: 'distributor/querySupplier',
        //     payload: {
        //         status: 0,
        //         taskType: 1,
        //     }
        // })
        // this.forceUpdate();

    }
    handlesCancel = (flag) => {
        this.setState({
            modalVisible: !!flag,
        })
    }
    handleChange = (record, flag) => {
        this.setState({
            modalVisible: true,
            selectValue: flag,
            selectedRowKeys: record.task_id,
            userId: record.user_id,
            supplier: this.state.supplier,
            supplierRecord:record,
        });
    }
    handleInput = (e) => {
        this.setState({
            addInputValue: e.target.value,

        })
    }
    handleTableChange = (pagination, filtersArg, sorter) => {
        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            status: 0,
            taskType: 1,
            ...filters,
        };

        if (sorter.field) {
            params.sorter = `${sorter.field}_${sorter.order}`;
        }
        this.handleJump(params);
    }
    handleJump=(params)=>{
        if(this.state.keys==='unExamine'){
            params["status"]=0;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/querySupplier',
                payload:params,
            })
        }else if(this.state.keys==='examinePass'){
            params["status"]=1;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/queryPassAndUnPass',
                payload:params,
            })
        }else if(this.state.keys==='examineUnPass'){
            params["status"]=2;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/queryPassAndUnPass',
                payload:params,
            })
        }
    }
    handleTabChange=(key)=>{
        this.setState({
            keys:key,
        })
        const params={};
        if(key==='unExamine'){
            params["status"]=0;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/querySupplier',
                payload:params,
            })
        }else if(key==='examinePass'){
            params["status"]=1;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/queryPassAndUnPass',
                payload:params,
            })
        }else if(key==='examineUnPass'){
            params["status"]=2;
            params["taskType"]=1;
            this.props.dispatch({
                type:'distributor/queryPassAndUnPass',
                payload:params,
            })
        }
    }

    render() {
        const {distributor: {loading: ruleLoading, Data,passAndUnPass}} = this.props;
        const {modalVisible, addInputValue,supplierRecord,ExamineUnPass,ExaminePass,unExamine} = this.state;
        return (
            <PageHeaderLayout title="供应商审核">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        {/*<Table columns={this.columns()} dataSource={this.state.supplier}*/}
                        {/*rowKey={row => row.task_id}/>*/}
                        <Tabs defaultActiveKey="unExamine" onChange={this.handleTabChange} size="large" tabBarStyle={{ marginBottom: 24 }}>
                            <TabPane tab={<span>未审核<Badge count={unExamine} showZero={true}/></span> } key="unExamine">
                                <SupplierTable
                                    data={Data}
                                    loading={ruleLoading}
                                    onChange={this.handleTableChange}
                                    handleChange={this.handleChange}/>
                            </TabPane>

                            <TabPane tab={<span>审核通过<Badge count={ExaminePass} showZero={true}/></span> } key="examinePass">
                                <ExamineIndex
                                    data={passAndUnPass}
                                    loading={ruleLoading}
                                    onChange={this.handleTableChange}/>
                            </TabPane>
                            <TabPane tab={<span>审核未通过<Badge count={ExamineUnPass} showZero={true}/></span> }key="examineUnPass">
                                <ExamineIndex
                                    data={passAndUnPass}
                                    loading={ruleLoading}
                                    onChange={this.handleTableChange}/>
                            </TabPane>
                        </Tabs>

                        <Modal title="审核说明" visible={modalVisible} onOk={this.handlesOk}
                               onCancel={() => this.handlesCancel(false)}>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="商店编码">
                                <Input placeholder="商店编码" disabled={true} value={supplierRecord.id}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="店铺名称">
                                <Input placeholder="店铺名称" disabled={true} value={supplierRecord.shop_name}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="店铺标题">
                                <Input placeholder="店铺标题" disabled={true} value={supplierRecord.shop_title}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="店铺地址">
                                <Input placeholder="店铺地址" disabled={true} value={supplierRecord.shop_address}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="店铺邮箱">
                                <Input placeholder="店铺邮箱" disabled={true} value={supplierRecord.seller_email}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="店铺电话">
                                <Input placeholder="店铺电话" disabled={true} value={supplierRecord.mobile}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="公告">
                                <Input placeholder="公告" disabled={true} value={supplierRecord.notice}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="备注信息">
                                <Input placeholder="无" disabled={true} value={supplierRecord.remark}/>
                            </FormItem>
                            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="描述">
                                <Input placeholder="请输入" onChange={this.handleInput} value={addInputValue}/>
                            </FormItem>
                        </Modal>
                    </div>
                </Card>
            </PageHeaderLayout>


        )
    }
}